<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="CSS/base.css" />
		<link rel="stylesheet" href="CSS/dianshesheying.css" />
		<!--以下是轮播图、走马灯的样式写法-->
		
		<style>
			@import url("//unpkg.com/element-ui@2.0.9/lib/theme-chalk/index.css");
			.el-carousel__item h3 {
				color: #475669;
				font-size: 14px;
				opacity: 1;
				line-height: 150px;
				margin: 0;
			}
			.el-carousel__item:nth-child(2n) {
				background-color: #99a9bf;
			}
			.el-carousel__item:nth-child(2n+1) {
				background-color: #d3dce6;
			}
			.block{
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<!--以下是录播图的HTML-->
			<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.0.9/lib/index.js"></script>
		<div id="app">
			<template>
				<div class="block ">
					<span class="demonstration"></span> 
					<el-carousel height="580px">
						<el-carousel-item>
							<h3><img src="images/index_banner_01.jpg"/> </h3>
						</el-carousel-item>
						<el-carousel-item>
							<h3><img src="images/index_banner_02.jpg"/> </h3>
						</el-carousel-item>
						<el-carousel-item>
							<h3><img src="images/index_banner_03.jpg"/> </h3>
						</el-carousel-item>
					</el-carousel>
				</div>
			</template>
		</div>
			<script>
				new Vue().$mount('#app')
			</script>
			<!--以上是轮播图的HTML-->
		<!--侧边栏-->
		<div class="siderbar">
			<div class="bar">
				<ul>
					<li class="top">返回顶部</li>
					<li class="tel">400-665-3707</li>
					<li class="qq"><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=916626570&amp;site=qq&amp;menu=yes&amp;from=message&amp;isappinstalled=0" target="_blank" title="即刻发送您的需求">在线咨询</a></li>					
					<li class="qr_code">
						微信二维码 <br>
						<img src="images/QR_code_SP.jpg" class="qr_code1" />
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
		<script>
			$(function() {
				// 悬浮窗口
				$(".siderbar").hover(function() {
					$(".siderbar").css("right", "5px");
					$(".bar .qr_code").css('height', '200px');
				}, function() {
					$(".siderbar").css("right", "-127px");
					$(".bar .qr_code").css('height', '53px');
				});
				// 返回顶部
				$(".top").click(function() {
					$("html,body").animate({
						'scrollTop': '0px'
					}, 300)
				});
			});
		</script>
		<div class=" da clearfix">
			<div class="top clearfix">
				<div class="a">
				<ul class="top1 clearfix">
						<a href="index.html">
							<h3>首页</h3>
							<h3>HOME</h3></a>
						<a href="works_level2.html">
							<h3>作品展示</h3>
							<h3>WORKS</h3></a>
						<a href="scense_level2.html">
							<h3>特色场景</h3>
							<h3>SCENE</h3></a>
						<a href="team_level2.html">
							<h3>服务团队</h3>
							<h3>TEAM</h3></a>
						<a href="brand_legend_level3.html">
							<h3>品牌资讯</h3>
							<h3>BRAND</h3></a>
						<a href="contact_us.html">
							<h3>联系我们</h3>
							<h3>CONTACT&nbsp;US</h3></a>
					</ul>
				</div>
			</div>
			<!--这是头部导航-->
			<!--以下为index_body部分-->
		<div class="index">
			<div class="index_body">
				<!--以下为index_frist部分-->
				<div class="index_frist clearfix">
					<div class="fl  rotate_img">
						<!--<img class="ro1" src="images/img1_01.jpg" />
						<img class="ro2" src="images/index_img_10.jpg"/>-->
						<!--以上这是图片旋转效果时的-->
						<!--以下是图片叠加，hover时淡入淡出的效果-->
						<img class="ro1" src="images/img1_01.jpg" />
					</div>
					<div class="frist_text fl">
						<h2>Latest Activity</h2>
						<b>最新活动，领取婚纱照最大限度福利！</b>
						<p>第一时间了解我们的动态，把握拍照最佳时期!</p>
						<div class="frist_lianjie clearfix">
							<a class="fl" href="javascript:;">
								<p>
									婚嫁大礼包<br />
									<span>wedding package</span>
								</p>
								<div class="iconfont">&#xe62e;</div>
							</a>
							<a class="fl" href="javascript:;">
								<p>
									最新主题<br />
									<span>latest series</span>
								</p>
								<div class="iconfont">&#xe62e;</div>
							</a>
							<a class="fl" href="javascript:;">
								<p>
									新景发布<br />
									<span>new sence</span>
								</p>
								<div class="iconfont">&#xe62e;</div>
							</a>
						</div>
						<a href="javascript:;">联系客服</a>
					</div>
				</div>
				<!--以下为index_second部分-->
				<div class="index_second">
					<div class="second_top clearfix">
						<p class="fl">Samples<span>最新样片</span></p>
						<a class="fr" href="works_level2.html">MORE+</a>
					</div>
					<div class="second_images">
						<a class="second_img1" href="works_level3_1.html">
							<img src="images/img1_02.jpg" />
							<div class="img_hover jiahao1">+</div>
						</a>
						<a class="second_img2" href="javascript:;">
							<img src="images/img1_03.jpg" />
							<div class="img_hover jiahao2">+</div>
						</a>
						<a class="second_img3" href="works_level3_2.html">
							<img src="images/img1_04.jpg" />
							<div class="img_hover jiahao3">+</div>
						</a>
						<a class="second_img4" href="javascript:;">
							<img src="images/img1_05.jpg" />
							<div class="img_hover jiahao4">+</div>
						</a>
						<a class="second_img5" href="javascript:;">
							<img src="images/img1_06.jpg" />
							<div class="img_hover jiahao5">+</div>
						</a>
					</div>
				</div>
			</div>
			<!--以下为dibu_banner部分-->
			<div class="dibu_banner">
				<img src="images/dibu_banner.jpg" />
			</div>
		</div>
			<div class="adc clearfix">
				<p>地址：合肥市包河区</p>
				<p>设计制作：点设软件科技项目二组</p>
				<p>手机：18214883210 15656573360</p>
				<p>合肥市点设摄影有限公司 版权所有 免责声明 皖ICP备30753号</p>
			</div>
			<!--以上是尾部地址-->
			<a href="#" class="back">&#xe62e;</a>
			<!--以上是回到顶部的快捷按钮-->
		</div>
	</body>
</html>
